<template>
  <view>
    <!-- 轮播图 -->
    <!-- indicator-dots这个是官方的指示器，把他关闭 -->
    <!-- 项目里用的自定义美化的指示器，比官方的好看 -->
    <view class="ba" >
      <swiper class="swiper"  :indicator-dots="false" :autoplay="true" :circular="true"
        :interval="5000" :duration="2000" indicator-active-color="#333" @change="change" :style="'height:'+heightsum+'rpx;max-height:' +heightsum+'rpx !important;'">
        <swiper-item v-for="(item,index) in SwiperImglist" :key="index" :current="index" @click="editClick(item)">
          <image class="Imges" :src="item.ad_pic" mode="aspectFill"></image>
          <view class="title">
            <text class="texts">{{item.ad_name}}</text>
          </view>
        </swiper-item>  
      </swiper>
      <!-- 自定义指示器 [官方的不好看，也不能自定义设置] -->
      <view class="indicator-dots-zdy-right" >
        <view class="w720">
          <view v-for="(item,index) in SwiperImglist" :key="index" class="indicator-dots-item"
            :class="current==index ? 'dots-item-current': 'no'">
            <view class="radio" :class="current==index ? 'current': 'no'"></view> 
          </view>
          <view class="ad">广告</view>  
        </view>
      </view>
    </view>
    
    <!--  -->
  </view>
</template>

<script>
  export default {
    name: "ads",
    props: {
      SwiperImglist: {
        type: Array
      },
      heightsum : Number,
      margin:{
        type:Number,
        default:0
      }
    },
    data() {
      return {
        // 这个是为了让自定义的指示器再对应的坐标高亮
        // 官方的指示器不能自定义，而且很丑！
        current: 0 //当前指示器所在的坐标
      };
    },
    methods: {
      change(e) {
        this.current = e.detail.current
      },
      editClick(item){
      	this.$emit('flags',item)
      }
      
    }
  }
</script>

<style lang="scss">


  swiper,
  .swiper {
    justify-content: center;
    align-items: center;
    /* #ifdef H5 || MP || APP-VUE */
    display: flex;
    /* #endif */
    width: 750rpx;
    //height: 456rpx;
    border: 0;
    margin: 0;
    padding: 0;
    right: 0;
    left: 0;
    view {
      /* #ifdef H5 || MP || APP-VUE */
      display: flex;
      /* #endif */
    }

    .Imges {
      /* #ifdef H5 || MP || APP-VUE */
      width: 100%;
      height: 100%;
      /* #endif */
      width: 750rpx;
      position: relative;
    }

    .ImagesTextbg {
      width: 750rpx;
      position: absolute;
      bottom: 0;
    }

    .title {
      width: 750rpx;
      position: absolute;
      bottom: 0;
      //padding: 10rpx 0;
      //height: 60rpx;
      //background-color: rgba(0, 0, 0, .2);
      //background-color: rgba(0, 0, 0, .2);
      justify-content: center;
      align-items: center;
      /* #ifdef APP-VUE || APP-PLUS || H5 || MP */
      background-image: linear-gradient(transparent, rgba(0, 0, 0, .85));
      /* #endif */

      /* #ifdef APP-NVUE || APP-PLUS-NVUE */
      // NVUE下不支持设置背景渐变透明度，透明度是无效的，这里已经换成了image引用图片作为text的渐变背景【.ImagesTextbg】
      //background-image: linear-gradient(180deg,transparent 70%,rgba(0,0,0,.6) 0);
      /* #endif */
      padding-top: 40rpx;
      padding-bottom: 20rpx;
      padding-left: 20rpx;
      padding-right: 20rpx;

    }
  }
  .ad{
    position: relative;
    margin-right:0rpx;
    
    color:#fff
  }
  .texts {
    color: #000000;
  }

  swiper,
  .swiper {
    position: relative;
  }

  // 自定义指示器
  .indicator-dots-zdy-right {
    bottom:20px;
    position: relative;
    //bottom: 0;
    // swiper[max-weidth:420rpx]
    /* #ifndef APP-NVUE || APP-PLUS-NVUE */ 
    display: flex;
    /* #endif */
    //background-color: #fff;
    width: 750rpx;
    align-items: center;
    justify-content: center;

    /* #ifndef APP-NVUE || APP-PLUS-NVUE */
    view {
      display: flex;
    }

    /* #endif */
    .w720 {
      width: 720rpx;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-end; //放到右边好看些

      // 未选中的指示器默认大小
      .indicator-dots-item,
      .radio {
        width: 20rpx;
        height: 14rpx;
        border-radius: 10rpx;
        margin-right: 10rpx;

        .radio {
          background-color: rgba(255, 255, 255, .5);
          margin-right: 0;
        }

        // 通用选中指示器点的颜色
        .current {
          background-color: #fc4d06;
        }
      }

      // 选中的指示器大小
      .dots-item-current {
        width: 30rpx;

        // 通用选中指示器点的大小
        .current {
          width: 30rpx;
        }
      }
    }
  }
</style>
